---
section: Grid
title: Grid Auto Flow
slug: /docs/grid-auto-flow/
---

# Grid Auto Flow

Utilities for controlling how elements in a grid are auto-placed.

<carbon-ad />

| React props              | CSS Properties               |
| ------------------------ | ---------------------------- |
| `gridAutoFlow={keyword}` | `grid-auto-flow: {keyword};` |

## Usage

Use the `gridAutoFlow={keyword}` utilities to control how the auto-placement algorithm works for a grid layout.

```jsx preview color=fuchsia
<>
  <template preview>
    <x.div
      display="grid"
      gridAutoFlow="column"
      gridTemplateColumns={3}
      gridTemplateRows={3}
      gap={4}
    >
      {Array.from({ length: 9 }, (_, index) => index + 1).map((value) => (
        <x.div
          key={value}
          h={12}
          borderRadius="md"
          bg="fuchsia-500"
          color="white"
          display="flex"
          alignItems="center"
          justifyContent="center"
          fontSize="2xl"
          fontWeight="extrabold"
        >
          {value}
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div
    display="grid"
    gridAutoFlow="column"
    gridTemplateColumns={3}
    gridTemplateRows={3}
    gap={4}
  >
    <div>1</div>
    {/* ... */}
    <div>9</div>
  </x.div>
</>
```

## Responsive

To control the grid-auto-flow property at a specific breakpoint, use responsive object notation. For example, adding the property `gridAutoFlow={{ md: "column" }}` to an element would apply the `gridAutoFlow="column"` utility at medium screen sizes and above.

```jsx
<x.div display="grid" gridAutoFlow={{ md: 'column' }}>
  {/* ... */}
</x.div>
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
